// 初始化目录树数据
const treeData = [
    {
        label: '经济数据',
        children:[
            {
                label: '需求侧数据',
                children: [
                    { 
                        label: '消费',
                        children: [
                            { label: '居民消费' },
                            { label: '政府消费' }
                        ]
                    },
                    { 
                        label: '投资' ,
                        children: [
                            { label: '房地产投资' },
                            { label: '基建投资' }
                        ]
                    },
                    { 
                        label: '进出口',
                        children: [
                            { label: '进口总额' },
                            { label: '出口总额' }
                        ]
                    }
                ]
            },
            {
                label: '生产侧数据',
                children: [
                    { 
                        label: '工业增加值',
                        children: [
                            { label:'制造业'}
                        ] 
                    },

                ]
            }
        ]
        
    },
    {
        label: '电力数据',
        children: [
            { label: '产业用电' },
            { label: '居民用电' },
            { label: '微观主体用电' }   
        ]
    }
];

// 渲染目录树
function renderTree(data, container) {
    const ul = document.createElement('ul');
    data.forEach(item => {
        const li = document.createElement('li');
        const toggle = document.createElement('span');
        toggle.className = 'toggle';
        toggle.textContent = item.children ? '+' : ' ';
        li.appendChild(toggle);
        li.appendChild(document.createTextNode(' ' + item.label));
        if (item.children) {
            const childUl = document.createElement('ul');
            renderTree(item.children, childUl);
            li.appendChild(childUl);
            childUl.style.display = 'none';
            toggle.addEventListener('click', function(e) {
                e.stopPropagation();
                if (childUl.style.display === 'none') {
                    childUl.style.display = 'block';
                    toggle.textContent = '-';
                } else {
                    childUl.style.display = 'none';
                    toggle.textContent = '+';
                }
            });
        }
        ul.appendChild(li);
    });
    container.appendChild(ul);
}

// 初始化
window.onload = function() {
    const treeContainer = document.getElementById('tree-container');
    renderTree(treeData, treeContainer);

    // 添加点击事件处理
    treeContainer.addEventListener('click', function(e) {
        if (e.target.tagName === 'LI') {
            // 移除之前选中的样式
            const prevSelected = treeContainer.querySelector('.selected');
            if (prevSelected) {
                prevSelected.classList.remove('selected');
            }
            // 添加当前选中样式
            e.target.classList.add('selected');
            const selectedItem = e.target.textContent;
            // 生成随机数据
            const data = Array.from({length: 12}, () => Math.floor(Math.random() * 100));
            // 创建图表容器
            const chartContainer = document.getElementById('chart-container');
            chartContainer.innerHTML = '';
            // 创建canvas元素
            const canvas = document.createElement('canvas');
            canvas.width = 800;
            canvas.height = 400;
            chartContainer.appendChild(canvas);
            // 绘制图表
            const ctx = canvas.getContext('2d');
            const padding = 50;
            const width = canvas.width - padding * 2;
            const height = canvas.height - padding * 2;
            const maxValue = Math.max(...data);
            // 绘制坐标轴
            ctx.beginPath();
            ctx.moveTo(padding, padding);
            ctx.lineTo(padding, canvas.height - padding);
            ctx.lineTo(canvas.width - padding, canvas.height - padding);
            ctx.stroke();
            // 绘制数据点
            ctx.beginPath();
            const xStep = width / (data.length - 1);
            data.forEach((value, index) => {
                const x = padding + index * xStep;
                const y = canvas.height - padding - (value / maxValue) * height;
                if (index === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
                ctx.arc(x, y, 3, 0, Math.PI * 2);
            });
            ctx.strokeStyle = '#2196F3';
            ctx.lineWidth = 2;
            ctx.stroke();
        }
    });
};


// 渲染目录树
function renderTree(data, container) {
    const ul = document.createElement('ul');
    data.forEach(item => {
        const li = document.createElement('li');
        const toggle = document.createElement('span');
        toggle.className = 'toggle';
        toggle.textContent = item.children ? '+' : ' ';
        li.appendChild(toggle);
        li.appendChild(document.createTextNode(' ' + item.label));
        if (item.children) {
            const childUl = document.createElement('ul');
            renderTree(item.children, childUl);
            li.appendChild(childUl);
            childUl.style.display = 'none';
            toggle.addEventListener('click', function(e) {
                e.stopPropagation();
                if (childUl.style.display === 'none') {
                    childUl.style.display = 'block';
                    toggle.textContent = '-';
                } else {
                    childUl.style.display = 'none';
                    toggle.textContent = '+';
                }
            });
        }
        ul.appendChild(li);
    });
    container.appendChild(ul);
}

// 初始化
window.onload = function() {
    const treeContainer = document.getElementById('tree-container');
    renderTree(treeData, treeContainer);

    // 添加点击事件处理
    treeContainer.addEventListener('click', function(e) {
        if (e.target.tagName === 'LI') {
            // 移除之前选中的样式
            const prevSelected = treeContainer.querySelector('.selected');
            if (prevSelected) {
                prevSelected.classList.remove('selected');
            }
            // 添加当前选中样式
            e.target.classList.add('selected');
            const selectedItem = e.target.textContent;
            // 生成随机数据
            const data = Array.from({length: 12}, () => Math.floor(Math.random() * 100));
            // 创建图表容器
            const chartContainer = document.getElementById('chart-container');
            chartContainer.innerHTML = '';
            // 创建canvas元素
            const canvas = document.createElement('canvas');
            canvas.width = 800;
            canvas.height = 400;
            chartContainer.appendChild(canvas);
            // 绘制图表
            const ctx = canvas.getContext('2d');
            const padding = 50;
            const width = canvas.width - padding * 2;
            const height = canvas.height - padding * 2;
            const maxValue = Math.max(...data);
            // 绘制坐标轴
            ctx.beginPath();
            ctx.moveTo(padding, padding);
            ctx.lineTo(padding, canvas.height - padding);
            ctx.lineTo(canvas.width - padding, canvas.height - padding);
            ctx.stroke();
            // 绘制数据点
            ctx.beginPath();
            const xStep = width / (data.length - 1);
            data.forEach((value, index) => {
                const x = padding + index * xStep;
                const y = canvas.height - padding - (value / maxValue) * height;
                if (index === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
                ctx.arc(x, y, 3, 0, Math.PI * 2);
            });
            ctx.strokeStyle = '#2196F3';
            ctx.lineWidth = 2;
            ctx.stroke();
        }
    });
};